<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-30 19:39:23
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2023-10-26 10:27:10
-->
<template>
	<BaseContainer style="--w-left-gap: 60%">
		<template #left>
			<h3 class="label-title">
				当前数据总量: <span>{{ totalNum }}</span>
			</h3>
			<el-scrollbar max-height="80vh">
				<AreaTree class="mt10" ref="treeRef" :key="reload" api="admin_sysadministration_tree" @change="handleOperate"> </AreaTree>
			</el-scrollbar>
		</template>
		<el-card v-show="Object.keys(nodeData).length>0">
			<div class="detail" v-if="operateBtn == 'detail'">
				<el-descriptions title="行政区划详情" direction="vertical" :column="1" border>
					<el-descriptions-item label="行政区划名称">
						{{ nodeData.administrationName }}
					</el-descriptions-item>
					<el-descriptions-item label="上级行政区划">
						{{ nodeData.administrationPidName }}
					</el-descriptions-item>
					<el-descriptions-item label="行政区划排序">
						{{ nodeData.administrationSorting }}
					</el-descriptions-item>
					<el-descriptions-item label="行政区划编号">
						{{ nodeData.administrationCode }}
					</el-descriptions-item>
					<el-descriptions-item label="邮政编码">
						{{ nodeData.postalCode }}
					</el-descriptions-item>
				</el-descriptions>
			</div>
			<ruleForm v-else :nowRowData="nodeData" :id="nodeData.administrationId || nodeData.administrationPid" @refresh="onRefresh"></ruleForm>
		</el-card>
	</BaseContainer>
</template>

<script setup lang="ts">
import AreaTree from './components/AreaTree/index.vue'
import ruleForm from './components/ruleForm/index.vue'
import apiMod from '@/apiMod'
const reload = ref()
const treeRef = ref()
const nodeData: any = ref({})
const operateBtn = ref('detail')
const totalNum = ref(0)
const handleOperate = (type, data, node) => {
	operateBtn.value = type
	switch (type) {
		case 'add':
			nodeData.value = {
				administrationPid: data.administrationId,
				administrationPidName: data.administrationName,
			}
			break
		default:
			nodeData.value = data
			break
	}
}
const onRefresh = () => {
	reload.value = Math.random()
}

onMounted(() => {
	apiMod.sysadministration_count().then((res) => {
		totalNum.value = res.data
	})
})
</script>

<style scoped></style>
